<template>
  <div class="main-content">
    <p class="maintitle">全部审核订单</p>

   
      <el-row style="margin-right: 20px;margin-bottom: 20px">
        订单号
          <el-input
          style="width:200px;"

            v-model="getListData.no"
            placeholder="请输入"
            clearable
          ></el-input>
      
      业务员:
          <el-input
          style="width:200px;"

            v-model="getListData.salesman"
            placeholder="请输入"
            clearable
          ></el-input>
      
      客户号:
          <el-input
          style="width:200px;"

            v-model="getListData.cstmr_num"
            placeholder="请输入"
            clearable
          ></el-input>
        
      客户名:
          <el-input
          style="width:200px;"

            v-model="getListData.cstmr_name"
            placeholder="请输入"
            clearable
          ></el-input>
    
        <!-- <el-form-item label="下单数量" prop="num1">
          <el-input
            v-model.number="getListData.num1"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <span>-></span>
        </el-form-item>
        <el-form-item label="下单数量" prop="num2">
          <el-input
            v-model.number="getListData.num2"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item> -->
      添加时间:
          <el-date-picker
            v-model="getListData.created"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
      </el-row>
      <el-row>
        <el-button
          size="medium"
          class="filter-item"
          type="primary"
          @click="getList"
          >查询</el-button
        >
        <el-button size="medium" class="filter-item" @click="resetSearch"
          >重置</el-button
        >
        <el-button size="medium" class="filter-item" type="danger" @click="unSubmit"
          >未提交</el-button
        >
        <el-button size="medium" class="filter-item" type="success" @click="isSubmit"
          >已提交</el-button
        >
        <!-- <el-button size="medium" class="filter-item" type="primary"
          >已退回</el-button
        > -->
        <el-button size="medium" class="filter-item" type="info" @click="isAbolish"
          >已废除</el-button
        >
        <el-button size="medium" type="primary" @click="exportOrder"
          >订单导出
        </el-button>
      </el-row>
  

    <el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="no" label="订单号" width="180" align="center">
        <template slot-scope="{ row }">
          <router-link :to="`rInfo/${row.id}`">
            <span style="color: #66acf1">{{ row.no }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="下单数量" align="center">
      </el-table-column>
      <el-table-column prop="salesman" label="业务员" align="center">
      </el-table-column>
      <el-table-column prop="cstmr_num" label="客户号" align="center">
      </el-table-column>
      <el-table-column prop="cstmr_name" label="客户名" align="center">
      </el-table-column>
       <el-table-column prop="status_char" label="订单状态" align="center">
      </el-table-column>
      
      <el-table-column prop="created" label="添加时间" align="center">
      </el-table-column>
      <el-table-column prop="update_info" label="订单编辑记录"  show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="{ row }">
          <!-- <el-button size="mini" type="text" @click="handleEdit(row)"
            >编辑订单</el-button
          > -->
          <el-popconfirm
            style="margin-right: 10px"
            confirm-button-text="确认"
            cancel-button-text="取消"
            v-if="
              (session.role_id == 3 && row.status == 1) ||
              (session.role_id == 4 && row.status == 2) ||
              (session.role_id == 5 && row.status == 2)
            "
            title="确定提交订单吗!"
            @confirm="orderStatus(row)"
          >
            <el-button
              style="margin-right: 10px"
              size="mini"
              type="text"
              slot="reference"
              >提交订单</el-button
            >
          </el-popconfirm>
          <el-button
            style="margin-right: 10px"
            size="mini"
            type="text"
            v-else
            disabled
            >已提交</el-button
          >

          <el-popconfirm
            style="margin-right: 10px"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确定废除订单吗!"
            @confirm="abolishOrder(row)"
          >
            <el-button size="mini" type="text" slot="reference">{{
              row.abolish == "0" ? "废除订单" : "取消废除"
            }}</el-button>
          </el-popconfirm>

          <el-popconfirm
            style="margin-right: 10px"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确定回退订单吗!"
            @confirm="BackSubmit(row)"
          >
            <el-button
              style="margin-right: 10px"
              size="mini"
              type="text"
              slot="reference"
              >回退订单</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="text-align: right"
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>

  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  orderList,
  orderDelete,
  orderExport,
  orderStatus,
  BackSubmit,
  abolishOrder,
} from "@/app/api/order";
import { mapState } from "vuex";
import Pagination from "@/app/components/Pagination";

export default {
  components: {
    Pagination,
  },
  computed: {
    ...mapState("user", ["session", "account"]),
  },
  name: "Review",
  data() {
    return {
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
        listType: 2, // 审核订单
      },
      dialogVisible: false,
      form: {},
      dialogStatus: "", //编辑或新增
      baseurl: api_url,
    };
  },

  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    console.log('1');
    this.getList();
  },
  methods: {
    exportOrder() {
      this.downloadLoading = true;
      orderExport(this.getListData)
        .then((res) => {
          this.downloadLoading = false;
          window.location.href = this.baseurl + "/" + res.data.path;
        })
        .catch((err) => {
          this.downloadLoading = false;
        });
    },
    resetSearch() {
       this.getListData.cstmr_num = ""; this.getListData.salesman = ""; this.getListData.no = ""; this.getListData.cstmr_name = "";
      this.getListData.created = [];
      this.getListData.status = "";
      this.getListData.abolish = "";

      this.getList();
    },
    getList() {
      orderList(this.getListData)
        .then((res) => {
          this.tableData = res.data.ret;
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    // deleteRow(oid) {
    //   orderDelete({ oid })
    //     .then((res) => {
    //       if (res.code == "00000") {
    //         Message({
    //           message: "删除成功",
    //           type: "success",
    //           duration: 5 * 1000,
    //         });
    //         this.getList();
    //       }
    //     })
    //     .catch((error) => {
    //       console.log("save error", error);
    //     });
    // },
    // handleCreate() {
    //   this.dialogStatus = "create";
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["acForm"].clearValidate();
    //   });
    // },
    // updateData(id) {
    //   this.$refs["acForm"].validate((valid) => {
    //     if (valid) {
    //       if (id) {
    //         this.form.id = id;
    //       }
    //       patternAdd(this.form)
    //         .then((res) => {
    //           if (res.code == "00000") {
    //             Message({
    //               message: "操作成功",
    //               type: "success",
    //               duration: 2 * 1000,
    //             });
    //             this.getList();
    //             this.dialogVisible = false;
    //           }
    //         })
    //         .catch((error) => {
    //           console.log("patternAdd error", error);
    //         });
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    // handleEdit(row) {
    //   this.form = Object.assign({}, this.form, row);
    //   console.log(this.form);
    //   this.dialogStatus = "update";
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs["acForm"].clearValidate();
    //   });
    // },
    orderStatus(row) {
      orderStatus({ id: row.id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "操作成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("orderStatus error", error);
        });
    },
    abolishOrder(row) {
      abolishOrder({ id: row.id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "操作成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("orderStatus error", error);
        });
    },
    BackSubmit(row) {
      BackSubmit({ oid: row.id })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "操作成功",
              type: "success",
              duration: 2 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("BackSubmit error", error);
        });
    },
    unSubmit(){
      var status
      if(this.session.role_id == 4){
        status = 2;
      }else if (this.session.role_id == 1){
        status = "0";
      }else {
        status = 1;

      }
      this.getListData.abolish = "";

      this.getListData.status = status;
      this.getList();
    },
    isSubmit(){
     var status
      if(this.session.role_id == 4){
        status = 3;
      }else if(this.session.role_id == 1){
        status = 1;
      }else{
        status = 2;

      }
      this.getListData.abolish = "";
      this.getListData.status = status;
      this.getList();
    },
    isAbolish(){
      this.getListData.status = "";
      this.getListData.abolish = 1;
      this.getList();
    },
    tableRowClassName({row, rowIndex}) {

      console.log(this.session.role_id);

      if(this.session.role_id == 4 || this.session.role_id == 5){
          if (row.abolish == 1) {
            return 'info-row';
          } else if (row.status > 2) {
            return 'success-row';
          } else if (row.status == 2) {
            return 'warning-row';
          }
      }else if(this.session.role_id == 1 ){
         if (row.abolish == 1) {
            return 'info-row';
          } else if (row.status >= 1) {
            return 'success-row';
          } else if (row.status == 0) {
            return 'warning-row';
          }
      }else{
         if (row.abolish == 1) {
        return 'info-row';
      } else if (row.status > 1) {
        return 'success-row';
      } else if (row.status == 1) {
        return 'warning-row';
      }
      }
     
      return '';  
    },
  },
  
};
</script>

<style>
.main-content{
  width: 98.5%;
  height: 840px;
  margin: 1% auto;
  border-radius: 10px;
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.25);
  background-color: #fbfbfb;
  padding: 0px;
  position: relative;
}
.maintitle{
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 22px;
  color: #000000;
  margin: 10px 0 20px 10px;
}
.el-table .warning-row {
  background: #FFE8E8;
}
.el-table .success-row {
  background: #E8FFE8;
}
.el-table .info-row {
  background: #AFAFAF8A;
}
</style>
